<template>
  <div>
    <header-bar></header-bar>
    <div class="musicView">
      <top-dowd-load></top-dowd-load>
      <h1>{{mc.title}}</h1>
      <div class="content">
        <!--头部文字图片信息-->
        <div class="mc-text">
          <div class="mc-txt">
            <rating v-if="mc.rating" :rating="mc.rating"></rating>
            <span>{{popular.numRaters}}人评价</span>
            <p>{{mc.summary}}</p>
          </div>
          <div class="mc-img">
            <img :src="'https://images.weserv.nl/?url='+mc.image" alt="" width="100" height="140">
          </div>
        </div>
        <!--想听-->
        <div class="listen">
          <a href="#">想听</a>
          <a href="#">在听</a>
          <a href="#">听过</a>
        </div>
        <!--音乐台-->
        <!--<div class="fm">-->
          <!--<img :src="'https://images.weserv.nl/?url='+mc.image" alt="">-->
          <!--<div class="fm-play"><svg title="Title" viewBox="15 8 10 13" height="34" width="34" class="icon" style="vertical-align: middle;"><desc>Icon</desc><path d="M16.2404248,8.16131117 L24.4883398,13.8012748 C25.1705534,14.1855546 25.1705534,14.8143854 24.4883398,15.1986903 L16.2404248,20.8387042 C15.5581861,21.222984 15,20.8967404 15,20.1136905 L15,8.88632486 C15,8.1032498 15.5581861,7.7770062 16.2404248,8.16131117 Z" stroke="none" fill="#2bbc64" fill-rule="evenodd"></path></svg></div>-->
        <!--</div>-->
        <div class="fm">
          <a :href="`https://douban.fm/?context=channel:0|subject_id:`+mc.id">进入豆瓣FM欣赏该音乐大碟</a>
        </div>
        <!--标签-->
        <div class="tags">
          <p>相关标签</p>
          <ul>
            <li v-for="(tag,t) in tags" :key="t.count">{{tag.name}}</li>
          </ul>
        </div>
      </div>
      <!--广告-->
      <div class="ad">
        <img src="../../assets/img/ad2.jpg" alt="" width="100%" height="96">
        <span class="ad-img">广告</span>
      </div>
      <down-load-app></down-load-app>
    </div>
  </div>
</template>

<script>
  import Rating from '../../public/Rating'
  import HeaderBar from '../HeaderBar'
  import TopDowdLoad from '../../public/TopDowdLoad'
  import DownLoadApp from '../../public/DownLoadApp'

  export default {
    name: 'MusicView',
    data() {
      return {
        mc: {},
        popular: {},
        tags:[]
      }
    },
    components: {
      HeaderBar,
      TopDowdLoad,
      Rating,
      DownLoadApp
    },
    created() {
      const id = this.$route.params.mcid
      this.axios.get('api/music/' + id)
        .then((res) => {
          let mc = res.data
          let popular = mc.rating
          let tags = mc.tags
          this.tags = tags
          this.popular = popular
          this.mc = mc
          // console.log(tags)
        })
        .catch((err) => console.log(err))
    }
  }
</script>

<style lang="scss">
  .musicView {
    margin-top: 47px;
    h1 {
      text-align: left;
      padding: 15px;
      margin: 15px 0 5px;
      font-size: 24px;
      line-height: 36px;
      word-break: break-all;
    }
    .content {
      padding: 0 15px;
      .mc-text {
        display: flex;
        line-height: 28px;
        .mc-txt {
          flex: 2;
          span {
            color: #aaa
          }
          .rating {
            display: inline-block;
            margin-right: 26px;
            span {
              color: #494949;
            }
          }
          p {
            color: #494949;
            margin-top: 15px;
            padding-right: 24px;
            font-size: 14px;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:10;
            overflow: hidden;
            text-align: justify;
          }
          .star-full {
            display: inline-block;
            width: 13px;
            height: 13px;
            background-image: url();
            background-size: cover;
          }

          .star-gray {
            display: inline-block;
            width: 13px;
            height: 13px;
            background-image: url();
            background-size: cover;
          }

          .star-half {
            display: inline-block;
            width: 13px;
            height: 13px;
            background-image: url();
            background-size: cover;
          }

          .average {
            padding-right: 8px;
            font-size: 15px;
          }
        }
        .mc-img {
          text-align: right;
          flex: 1;
        }
      }
    }
    .listen{
      display: flex;
      a{
        flex: 1;
        display: inline-block;
        height: 30px;
        width: 128px;
        margin:20px 10px;
        line-height: 30px;
        font-size: 15px;
        text-align: center;
        color: #ffb712;
        border: 1px solid #ffb712;
        border-radius: 3px;
      }
    }
    .tags{
      margin-bottom: 10px;
      p{
        color: #aaa;
        margin: 0 0 15px;
        font-size: 15px;
      }
      ul{
        li{
          display: inline-block;
          margin-right: 10px;
          padding: 5px 10px;
          border-radius: 15px;
          margin-bottom: 10px;
          font-size: 13px;
          border: 1px solid #42bd56;
          color: #42bd56;
          background-color: #effaf0;
        }
      }
    }
    .fm{
      padding: 18px 5px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e2e2e2;
      font-size: 20px;
      font-weight: 300;
      line-height: 22px;
      font-style: normal;
      font-stretch: normal;
      color: #333;
      background: url("../../assets/img/fm.png") right 20px no-repeat;
      background-size: auto 30px;
      a{
        display: block;
        color: #2CA532;
        font-weight: bold;
        width: 100%;
        height: 100%;
      }
      /*position: relative;*/
      /*.fm-play{*/
        /*position: absolute;*/
        /*top: 0;*/
        /*left: 0;*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*background-color: hsla(0,0%,100%,.8);*/
        /*text-align: center;*/
        /*line-height: 200px;*/
      /*}*/
    }
    .ad{
      line-height: 96px;
      height: 96px;
      position: relative;
      .ad-img{
        color: #aaa;
        position: absolute;
        bottom: 0;
        right: 0;
        display: inline-block;
        width: 34px;
        height: 23px;
        padding: 2px;
        line-height: 23px;
        text-align: center;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
</style>
